import React, { Component } from 'react'
/* import  './index.scss'
 */
import { Link } from 'react-router-dom'



import styles from './index.module.css'

import NavHeader from '../../components/NavHeader'
import axios from 'axios'
import { Toast } from 'antd-mobile'


//定义一个全局变量，解决脚手架中-全局变量访问的问题
const  BMapGL = window.BMapGL





 class Map extends Component {
         
  state={
    // 各个街道小区下的房源列表
    houseList :[],
    // 表示是否展示房源列表

    isShowList : false
  }
    

    componentDidMount(){
        this.initMap()
        console.log(this)

    }

     initMap(){


      // 1、初始化地图实例
        // 注意；在react脚手架中全局对象需要使用 window来访问，否则，会造成ESLint效验报错

        const map = new  BMapGL.Map('container')
        // 2、设置中心点坐标--为天安门坐标
      //  const  point = new BMapGL.Point(116.404,39.915)
           
       // 作用：能够在其他地方通过 this 来获取到--地图对象
        this.map = map
      
          // 功能一、获取当前定位城市并展示到百度地图中
          const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))
          console.log(label, value)
         //1-1、创建地址解析器实列
         /* 
         正/逆地址解析：地址解析服务提供从地址转换到经纬度的服务，反之，逆地址解析则提供从经纬度坐标转换到地址的转换功能。
         */
            //1-2创建地址解析器实列
         const myGeo = new BMapGL.Geocoder();
         // 1-3将地址解析结果显示在地图上，并调整地图视野
         myGeo.getPoint(label, 
          
          
             async point=>{
                if(point){

                      // 1-4、地图初始化，同时设置地图展示级别-地图必须经过初始化才可以执行其他操作,这样我们就创建了一张以天安门为中心的地图。
                    map.centerAndZoom(point, 11);
                 
                      // 1-5、添加常用控件--比例尺与缩放组件
                      const scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
                      map.addControl(scaleCtrl);
                      const zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
                      map.addControl(zoomCtrl);


                    //调用 renderOverLays方法
                   this.renderOverLays(value)
                }
      
            },  

         label
         
         )



        // 给地图绑定移动事件
        
        map.addEventListener('movestart',()=>{
             console.log('地图开始移动')

             if(this.state.isShowList){

                this.setState({
                  isShowList:false
                })
             }
        })

     }

     // 第一个方法、渲染覆盖物方法 
    // 1 接收区域id参数 ，获取 该区 下的房源数据
    // 2 获取房源类型 与 下级地图缩放级别   

    async  renderOverLays(id){

       try {

          // 开启loading 
      Toast.loading('加载中...',0,null, false)

      const  res = await  axios.get(`http://localhost:8080/area/map?id=${id}`)
            console.log(res)  
      const  data = res.data.body
        

      // 调用 getTypeAndZoom 方法  获取级别和类型
         const  {  nextZoom,type } =  this.getTypeAndZoom()
         
         data.forEach(item=>{

          //  创建覆盖物 

          this.createOverLays(item,nextZoom,type)
         })
           
           // 关闭loading
           Toast.hide()
        
       } catch (error) {
        
            // 关闭loading
            Toast.hide()


       }

     }


     // 第二个方法： 创建覆盖物
        createOverLays(data,zoom,type){

      const  { coord:{ longitude, latitude   }, label:areaName , count:count,value:value}  = data
        
      // 创建坐标对象
      const areaPoint = new BMapGL.Point(longitude, latitude)

      if( type === 'circle'){

        //  区 or  镇

        this.createCircle(areaPoint,areaName,count,value,zoom)
      }else{
          // 小区

          this.createRect(areaPoint,areaName,count,value)
      }
            


     }

    //   第三个方法  -- 计算要绘制的覆盖物类型 和 下一个缩放级别
   // 计算要绘制的覆盖物类型和下一个缩放级别
  // 区   -> 11 ，范围：>=10 <12
  // 镇   -> 13 ，范围：>=12 <14
  // 小区 -> 15 ，范围：>=14 <16
  getTypeAndZoom() {
    // 调用地图的 getZoom() 方法，来获取当前缩放级别
    const zoom = this.map.getZoom()
    let nextZoom ,type

     console.log('当前地图缩放级别：', zoom)
    if (zoom >= 10 && zoom < 12) {
      //具体到区的--下一个缩放级
      nextZoom = 13
      // circle 表示绘制圆形覆盖物（区、镇）
      type = 'circle'
    } else if (zoom >= 12 && zoom < 14) {
      // 镇
      nextZoom = 15
      type = 'circle'
    } else if (zoom >= 14 && zoom < 16) {
      // 小区
      type = 'rect'
    }
   
    return {
      nextZoom,
      type
    }
  }
     
     // 第四个方法： 创建区 or  镇 覆盖物
    createCircle(Point,Name,count,id,zoom){
       
               
      // 说明：设置setContent后，第一个参数中，设置文本内容就失效了，因此可以清空，传入一个空字符串即可
      const opts = {
        position:Point ,// 传入每一个区的经纬度
        offset: new BMapGL.Size(-35, -35) // 设置文本偏移量
        };
        
        const label = new BMapGL.Label('', opts);
        
        //给每一个覆盖物添加一个唯一标识-后面点击覆盖物-完成相应的业务逻辑-需要使用到这个id
        label.id = id


          // 设置房源覆盖物内容
          label.setContent(`
              
            <div  class="${styles.bubble}" >
              <p  class="${styles.name}">${Name}</p>
              <p>${count}套</p>
            </div>
          
          `)
  
            
          //添加单击事件
          label.addEventListener('click',()=>{
          //console.log('单击事件触发了',label.id)


            // 点击之后，以当前点击的覆盖物为中心放大地图
            // 第一个参数，坐标对象   第二个参数： 放大级别
            this.map.centerAndZoom(Point, zoom);
            console.log('zoom的值',zoom)

            // 调用 renderOverLays方法，获取该区域下的房源信息
            this.renderOverLays(id)

           

          //清除地图上所有的覆盖物--套一个seTtimeout，解决百度地图API的js文件自身报错的问题
            setTimeout(()=>{

            this.map.clearOverlays()
            },0)




          })

          this.map.addOverlay(label)
    }
    

    // 第五个方法   ： 创建 街道小区覆盖物
    createRect(point, name, count, id) {
      // 创建覆盖物
      const label = new BMapGL.Label('', {
        position: point,
        offset: new BMapGL.Size(-50, -28)
      })
  
      // 给 label 对象添加一个唯一标识
      label.id = id
  
      // 设置房源覆盖物内容
      label.setContent(`
        <div class="${styles.rect}">
          <span class="${styles.housename}">${name}</span>
          <span class="${styles.housenum}">${count}套</span>
          <i class="${styles.arrow}"></i>
        </div>
      `)
  
  
      // 添加单击事件
      label.addEventListener('click', (e) => {
               
        this.getHouseList(id)

        console.log('小区被点击了',e)
         const  target = e.domEvent.changedTouches[0]


         this.map.panBy(
          /*  街道小区房屋的实际坐标 */
          /* x 周 */
           window.innerWidth / 2 - target.clientX,
           /* y 轴 */
            
           (window.innerHeight - 330  ) / 2  -  target.clientY

         )

   



      })



  
      // 添加覆盖物到地图中
      this.map.addOverlay(label)

    }



   // 获取街道小区房源数据

   async getHouseList(id){

     try {
        // 开启loading 

        Toast.loading('加载中...',0,null, false)
        const res = await axios.get(`http://localhost:8080/houses?cityId = ${id}`)
        console.log(res)

        //关闭 loading
        
        Toast.hide()
        this.setState({
          houseList:res.data.body.list,
          isShowList:true
        })
     } catch (error) {

          //关闭 loading

          Toast.hide()
      
     }

    

   

   }
 

  // 渲染房屋列表的方法

  renderHouseList(){
         return  this.state.houseList.map((item)=>(
         
        <div className={styles.house} key={item.houseCode }>
             <div  className={styles.imgWrap}>
               <img   className={styles.img} src={`http://localhost:8080${item.houseImg}`} alt=""/>
             </div> 

             <div className={styles.content}>
                 <h3 className={styles.title}> {item.title}</h3>
                 <div className={styles.desc} >{item.desc}</div>
                 <div>
                     {/* ["近地铁"，'随时看房'] */}
                     { item.tags.map((tag,index)=>{
                            const  tagClass = 'tag' + (index + 1)

                          return   (<span  className={[styles.tag, styles[tagClass]].join(' ')} key={tag} >{tag}</span>)
                     })}
                 </div>
                 <div  className={styles.price}>
                     <span  className={styles.priceNum}>{item.price}</span>元/月
                 </div>
             </div>
      </div>
       ))
  }

  render() {
    return (
      <div   className={styles.map}>
         {/* 定义一个元素作为地图的容器*/}

          {/*   <NavHeader onLeftClickEvt={() =>{
                  console.log('哈哈哈哈哈哈或')
            }} >地图找房</NavHeader> */}
              <NavHeader >地图找房</NavHeader>
           <div    id= 'container'  className={styles.container}   />

           {/* 小区街道的房源列表 */}
           {/* 添加styles.show 展示房屋列表 */}

            <div   className={[ styles.houseList,   this.state.isShowList ? styles.show : ''   ].join(' ')}  >
              <div className={styles.titleWrap}>
                  <h1 className={styles.listTitle}>房屋列表</h1>
                  <Link  className={styles.titleMore} to='/home/list'>更多房源</Link>
              </div>

              <div  className={styles.houseItems}>
                     {/* 房屋结构 */}
                     {  this.renderHouseList()}
              </div>
            </div>
      </div>
    )
  }
}

export default  Map